<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局开始 使用组件-->
        <depttree :node-data="company" :is-root="true" @addeparment="addeparment" />
        <!-- 用了一个行列布局结束 -->
        <hr>

        <!-- 树形图开始 利用插槽 -->
        <el-tree :data="treeData" :props="{label:'name'}" default-expand-all :expand-on-click-node="false">
          <template #default="{data}">
            <depttree :node-data="data" :is-root="false" @delpartment="getpartments" @addeparment="addeparment" @editDepartment="editDepartment" />
          </template>
        </el-tree>
        <!-- 树形图结束 利用插槽 -->

      </el-card>

      <!-- 添加子组件弹窗开始 -->
      <dept-deparment ref="addDept" :dialog-visible="dialogVisible" :node-data="nodedate" :show-dialog.sync="dialogVisible" @addeparment="getpartments" />
      <!-- 添加子组件弹窗结束 -->

    </div>
  </div>
</template>

<script>
import depttree from '@/views/departments/components/dept-tree.vue'
import { department } from '@/api/department'
import { listToTreeData } from '@/utils'
import DeptDeparment from './components/dept-deparment.vue'
export default {
  components: { depttree, DeptDeparment },
  data() {
    return {
      company: {
        name: '广州黑马程序眼按摩场所',
        manager: '负责人',
        id: ''
      },
      treeData: [],
      dialogVisible: false,
      nodedate: {}
    }
  },

  // 在页面初始化时请求部门数据
  async created() {
    // 调用这个函数
    this.getpartments()
  },

  // 函数
  methods: {
  //  封装请求函数
    async  getpartments() {
      const res = await department()
      // console.log('部门数据', res)
      // 调用函数
      this.treeData = listToTreeData(res.depts, '')
    },

    // 父组件接收到子组件被点击了添加部门按钮，修改显示窗口
    addeparment(nodeDate) {
      this.dialogVisible = true
      // 接受子组件传过来的点击了谁的元素
      // 把子组件点击的那个元素传给弹窗
      this.nodedate = nodeDate
    },

    // 编辑部门
    async editDepartment(nodeDate) {
      // 这里知道被点击编辑了, 就应该加载数据
      // 而且这里是父页面, 要通知子组件加载的话
      // 用 this.$refs.xxx 即可
      console.log(this.$refs.addDept)
      await this.$refs.addDept.companyDepartment(nodeDate.id)
      this.dialogVisible = true
      this.nodedate = nodeDate
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 10px  40px;
  font-size:15px;
}
</style>
